<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录页</title>
    <link href="../css/logo.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="bigbox">
      <div class="banner">
        <div class="nav">
          <a href="../index.html">商城首页</a>
          <a href="#">全部商品</a>
          <a href="#">礼包收藏</a>
          <a href="#">领取游戏道具</a>
          <a href="#">土罐集市</a>
          <a href="#">妙趣盒·点亮大集结</a>
        </div>
        <div class="login">
          <div c></div>
          <div class="title">帐号密码登录</div>
          <div class="tips">推荐使用<a href="#">手机QQ扫码登录</a>,防止盗号</div>
          <div class="ts"></div>
          <div class="txt">
            <input type="text" placeholder="支持QQ号/邮箱/手机号登录">
          </div>
          <div class="txt1">
            <input type="password" placeholder="密码">
          </div>
          <div class="btn">
            <input type="button" onclick="logo()" value="登录">
          </div>
        </div>
      </div>
      <div class="bottom"></div>
    </div>

    <script src="../js/axios.min.js"></script>
    <script src="../js/api.js"></script>
    <script>
      let isUsername=true;
      let isPassword=false;
      let ipts=document.querySelectorAll("input");
      let ts=document.querySelector(".ts");
      ipts[0].onfocus=function(){
        ts.innerHTML = "请输入字母开头，6-18，数字 字母 下线 ";
      }
      ipts[0].onblur=function(){
        let reg = /^[a-z]\w{5,17}$/i
        if (reg.test(this.value)) {
          isUsername = true;
          ts.innerHTML = "用户名格式正确";
          ts.style.color="green";
        } else{
          isUsername = false;
          ts.innerHTML = "用户名格式不正确";
        }
      }
      ipts[1].onblur=function(){
        let reg = /^\S{6,16}$/;
        if(reg.test(this.value)){
          isPassword = true;
          ts.innerHTML = "密码格式正确";
          ts.style.color="green";
        }
        else{
          isPassword = false;
          ts.innerHTML = "密码格式错误";
          ts.style.color="red";
        }
      }
      function logo() {
        if(isUsername&&isPassword){
        let username = ipts[0].value;
        let password = ipts[1].value;
        axios.get(login,{params:{ username, password }}).then((res) => {
          let obj = res.data;
          console.log(obj)
          if(obj.code==1){
          localStorage.setItem("uname",obj.data.username);
          localStorage.setItem("uid",obj.data.id);
          localStorage.setItem("utoken",obj.data.token); 
           alert("登陆成功");
           location.href = "../index.html";
          }
          else{
            alert("用户名或密码有误")
          } 
        });
      }
      else{
            alert("用户名或密码有误")

          }
      }
    </script>
  </body>
</html>
